<script setup>
import HeaderNavTabarSvg from '@/components/HeaderNavTabarSvg/HeaderNavTabar.vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getUserProfile } from '@/api/system/user'
import moren from '@/static/icon/tongxunlu/moren.png'
import gril from '@/static/images/mine/gril.png'
import boy from '@/static/images/mine/boy.png'
const baseUrl = 'http://123.53.123.80:33000/prod-api'
const info = ref(null)

const handleCopy = () => {
  uni.showModal({
    content: '复制手机号码：' + info.value.phonenumber, //模板中提示的内容
    confirmText: '复制内容',
    success: (res) => {
      //点击复制内容的后调函数
      if (res.confirm) {
        uni.setClipboardData({
          data: info.value.phonenumber, //要被复制的内容
          success: () => {
            //复制成功的回调函数
            uni.showToast({
              //提示
              title: '复制成功',
            })
          },
        })
      }
    },
  })
}

const copyPhoneNumber = () => {
  uni.showModal({
    title: '电话',
    content: '确定要拨打电话吗?',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: info.value.phonenumber, // 需要拨打的电话号码
          success: () => {
            console.log('拨打电话成功')
          },
          fail: (err) => {
            console.log('拨打电话失败', err)
          },
        })
      } else if (res.cancel) {
        console.log('用户点击了取消')
      }
    },
  })
}

onLoad((v) => {
  info.value = JSON.parse(decodeURIComponent(v.data))
})
</script>

<template>
  <view class="page">
    <HeaderNavTabarSvg title="个人信息">
      <span></span>
    </HeaderNavTabarSvg>

    <view class="info-box">
      <view class="top-box">
        <image class="avater" v-if="info.avatar" :src="baseUrl + info.avatar"></image>
        <image class="avater" v-else :src="moren"></image>
        <view class="top-right">
          <view class="row1">
            <span>{{ info.nickName }}</span>
            <image class="avater" :src="info.sex == 0 ? boy : gril"></image>
          </view>
          <view class="row2">{{ info.remark }}</view>
        </view>
      </view>
    </view>

    <view class="row" @tap="copyPhoneNumber">
      <view class="left">联系</view>
      <text class="right phone" @longpress="handleCopy">
        {{ info.phonenumber }}
      </text>
    </view>
    <view class="row">
      <view class="left">部门</view>
      <view class="right">
        {{ info.dept.deptName }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';
.page {
  background-color: #f7f8fa;
  .info-box {
    margin: 20rpx 0;
    background-color: #fff;
    padding: 32rpx 40rpx;
    .top-box {
      display: flex;
      align-items: center;
      .avater {
        width: 136rpx;
        height: 136rpx;
        border-radius: 50%;
        margin-right: 40rpx;
      }
      .row1 {
        color: #1d2129;
        margin-bottom: 16rpx;
        display: flex;
        align-items: center;
        image {
          width: 28rpx;
          height: 28rpx;
          margin-left: 6rpx;
        }
      }
      .row2 {
        color: #86909c;
        font-size: 28rpx;
      }
    }
  }

  .row {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20rpx 40rpx;
    .left {
      margin-right: 40rpx;
    }
    .phone {
      color: #165dff;
    }
  }
}
</style>